<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>首页</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <link rel="stylesheet" href="css/layui-theme-custom.css"/>
    <link rel="stylesheet" href="css/mytest.css"/>
    <link rel="stylesheet" href="css/note_list.css"/>
    <link rel="stylesheet" th:href="@{/css/share.css}"/>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/axios.min.js"></script>
    <link rel="stylesheet" href="js/RightMenu/smartMenu.css"/>
    <link rel="stylesheet" href="css/lable.css"/>
    <script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>

    <style>
        #hidden_model input {
            width: 80%;
        }

        .layui-layer-btn {
            width: 280px;
        }

        .layui-layer-btn .layui-layer-btn0, .layui-layer-btn .layui-layer-btn1 {
            height: 34px;
            line-height: 34px;
        }

        .layui-layer-content {
            height: 180px;
        }

        .own-vip {
            position: absolute;
            top: 38px;
            right: 24px;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background-color: #fff;
        }

        #content {
            display: flex;
        }

        #body_right {
            width: 100%;
            background-color: #fff;
        }

        .welcome .test {
            box-shadow: 3px 5px 5px rgba(0, 0, 0, .2);
            width: 120px;
            height: 280px;
            background-color: #FFF;
            border: 1px solid #F3F3F3;
            position: absolute;
            z-index: 1200;
        }

        #hidden {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            z-index: -10;
        }

        #QRCode {
            position: absolute;
            overflow: hidden;
            display: none;
        }
        .ulCheck li{
            margin-left: 20px;
            margin-top: 20px;
            color: #999999;
            font-size: 13px;
            cursor: pointer;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">
            <img src="img/logo.png" width="70px"/> 鲸鱼笔记
        </div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="img/timg (3).jpg" class="layui-nav-img" id="personal_img">
                    <img class="own-vip" src="img/vip_no.png"/>
                </a>
                <dl class="layui-nav-child">
                    <dd>
                        <a href="javascript:void(0)" id="information">个人信息</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)" id="change_pwd">修改密码</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)" id="read_pwd">设置阅读密码</a>
                    </dd>
                    <dd>
                        <a href="javascript:void(0)">注销登录</a>
                    </dd>
                </dl>
            </li>
            <li class="layui-nav-item">
                <a href="" style="color: #FFFFFF !important;">客户端下载</a>
            </li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <div class="left_top">
                <div class="new">
                    <i class="layui-icon layui-icon-add-1"
                       style="font-size: 30px; color: #1E9FFF;line-height: 56px;"></i>
                    <a color="#000000" id="spe" href="#">新文档</a>
                    <i class="layui-icon layui-icon-triangle-d"
                       style="font-size: 6px; color: #999999;margin-left: 60px;position: absolute; height: 25px;"></i>
                </div>
                <ul class="xf1 display">
                    <li id="create_note">新建笔记</li>
                    <li id="create-mdnote">新建MarkDown</li>
                    <li>新建文件夹</li>
                </ul>
            </div>
            <ul class="layui-nav layui-nav-tree" lay-filter="test" id="leftbox">
                <li class="layui-nav-item" id="new">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-template-1" style="font-size: 16px;"></i>&nbsp;&nbsp;&nbsp;&nbsp;最新文档
                    </a>
                </li>
                <li class="layui-nav-item" id="share">
                    <a href="javascript:;" data-url="mysharePage">
                        <i class="layui-icon layui-icon-share" style="font-size: 16px;"></i>&nbsp;&nbsp;&nbsp;&nbsp;与我分享
                    </a>
                </li>
                <li class="layui-nav-item" id="myFileFolder">
                    <a href="javascript:;" data-url="">
                        <i class="layui-icon layui-icon-template-1" style="font-size: 16px;"></i>&nbsp;&nbsp;&nbsp;&nbsp;我的文件夹
                    </a>
                </li>
                <li class="layui-nav-item" id="favorite">
                    <a href="javascript:;" data-url="favoritePage">
                        <i class="layui-icon layui-icon-star-fill" style="font-size: 16px;"></i>&nbsp;&nbsp;&nbsp;&nbsp;加星文件
                    </a>
                </li>
                <li class="layui-nav-item" id="labelList">
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-note" style="font-size: 16px;"></i>&nbsp;&nbsp;&nbsp;&nbsp;我的标签
                    </a>
                    <ul class="contextmenu">
                        <li>
                            <div class="site-demo-button" style="margin-bottom: 0;">
                                <button data-method="notice" class="layui-btn"
                                        style="background: #0000FF; border: none;padding-left: 18px;color: #fff;">新建标签
                                </button>
                            </div>
                        </li>
                    </ul>
                    <dl class="layui-nav-child" id="label">
                        <ul class="contextmenu2">
                            <li>
                                <div class="site-demo-button" style="margin-bottom: 0;">
                                    <button data-method="updLabel" class="layui-btn"
                                            style="background: #0000FF; border: none;padding-left: 18px;color: #fff;">
                                        重命名
                                    </button>
                                </div>
                            </li>
                            <li>
                                <div class="site-demo-button" style="margin-bottom: 0;">
                                    <button data-method="del" class="layui-btn"
                                            style="background: #0000FF; border: none;padding-left: 18px;color: #fff;">删除
                                    </button>
                                </div>
                            </li>
                        </ul>
                    </dl>
                </li>
                <li class="layui-nav-item" id="recycle">
                    <a href="javascript:;" data-url="recyclePage">
                        <i class="layui-icon layui-icon-delete" style="font-size: 16px;"></i>&nbsp;&nbsp;&nbsp;&nbsp;回收站
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <div class="layui-body" id="content">
        <!-- 内容主体区域 -->
        <div class="body_left">
            <div class="right_top">
                <i class="iconfont icon-fanhui"
                   style="font-size: 24px ;line-height: 56px;float: left; margin-left: 20px; color: #DFE2E8;"></i>
                <div class="search layui-btn-radius">
                    <i class="iconfont icon-sousuo" style="float: left;margin-left: 5px;color: #DFE2E8;"></i>
                    <input type="text" name="title" required lay-verify="required" placeholder="搜索..."
                           autocomplete="off" class="searchinput">
                </div>
                <i class="iconfont icon-icon-" id="sort" style="float: right; margin-right: 20px;color: #DFE2E8;"></i>
                <ul class="xf display">
                    <li>创建时间</li>
                    <li>修改时间</li>
                    <li>文件大小</li>
                </ul>
            </div>
            <div id="note_list">
                <ul id="notes" >
                    <li >
                        <div class="welcome" id="welcome" >
                            <div class="test" hidden="hidden" >
                                <ul class="ulCheck">
                                    <li>加星</li>
                                    <li>置顶</li>
                                    <li>重命名</li>
                                    <li>移动到</li>
                                    <li>删除</li>
                                    <li>分享</li>
                                    <li>阅读密码</li>
                                </ul>
                            </div>
                            <div style="height: 18px;"></div>
                            <div class="Ntop">
                                <img class="noteimg" src="img/note.png" width="16px" height="16px"/>
                                <span class="Ntitle">欢迎使用byte笔记</span>
                                <span class="images">
											<img src="img/star1.png" onMouseOver="this.src='img/star2.png'"
                                                 onMouseOut="this.src='img/star1.png'" height="14px" width="14px"
                                                 class="star"/>
											<img src="img/share1.png" onMouseOver="this.src='img/share2.png'"
                                                 onMouseOut="this.src='img/share1.png'" height="26px" width="26px"
                                                 class="share"/>
											<img src="img/delete1.png" onMouseOver="this.src='img/delete2.png'"
                                                 onMouseOut="this.src='img/delete1.png'" height="21px" width="21px"
                                                 class="delete"/>
										</span>
                            </div>
                            <div class="content">欢迎使用全新的有道云笔记——— 记录工作和生活点滴，办公文档随身携带</div>
                            <div class="Nbottom"><span>2019-12-18</span><span class="kb">30.60KB</span></div>
                        </div>
                    </li>
                    <li v-for="(note,index) in info.data" :id="forId(index)">
                        <div class="welcome" >
                            <div class="test" :id="forDivId(index)" hidden="hidden" >
                                <ul class="ulCheck" >
                                    <li class="idLi" hidden="hidden">{{note.id}}</li>
                                    <li class="idLi" hidden="hidden">{{note.notesName}}</li>
                                    <li class="addStarLi">加星</li>
                                    <li class="onTopLi">置顶</li>
                                    <li class="renameLi">重命名</li>
                                    <li class="removeLi">移动到</li>
                                    <li class="deleteLi">删除</li>
                                    <li class="shareLi">分享</li>
                                    <li class="readPwaLi">阅读密码</li>
                                </ul>
                            </div>
                            <div class="noteid" hidden="hidden">{{note.id}}</div>
                            <div style="height: 20px;"></div>
                            <div class="Ntop"><img class="noteimg"  :src="note.icon" width="16px" height="16px"/><span v-if="note.type=='0'" class="Ntitle">{{note.notesName}}.md</span>
                                <span v-if="note.type=='1'" class="Ntitle">{{note.notesName}}</span>
                                <div class="noteType" hidden="hidden">{{note.type}}</div>
                                <span class="images" :value="note.id">
											<img :src="'img/star'+note.favorite+'.png'"
                                                 onMouseOver="this.src='img/star2.png'"
                                                 onclick="change(this)"
                                                 :onMouseOut="'mouse('+note.favorite+')'" height="14px" width="14px"
                                                 class="star"/>
											<img src="img/share1.png" onMouseOver="this.src='img/share2.png'"
                                                 onMouseOut="this.src='img/share1.png'" height="26px" width="26px"
                                                 class="share"/>
											<img src="img/down1.png" v-if="note.type=='0'"
                                                 onMouseOver="this.src='img/down2.png'"
                                                 onMouseOut="this.src='img/down1.png'" height="19px" width="19px"
                                                 class="down"/>
											<img src="img/delete1.png" onMouseOver="this.src='img/delete2.png'"
                                                 onMouseOut="this.src='img/delete1.png'" height="21px" width="21px"
                                                 class="delete"/>
										</span>
                            </div>
                            <div class="content" v-if="note.content!=null">{{note.content}}</div>
                            <div class="Nbottom">
                                <span>{{note.updateTime}}</span><span class="kb">{{note.size}}KB</span>
                            </div>
                            <span hidden="hidden" id="nodeId">{{note.id}}</span>
                            <span hidden="hidden" id="userId">{{note.userId}}</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="body_right" style="background-color: white; height: 100% ; width: 100%"></div>
    </div>
</div>
<div id="hidden_model">
    <!--修改密码-->
    <div id="edit_pwd" hidden="hidden">
        <form class="layui-form edit_pwd" style="margin-top: 20px;">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入原密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password1" required lay-verify="required" placeholder="请输入原密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">重复新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password2" required lay-verify="required" placeholder="请输入原密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <!--设置阅读密码-->
    <div id="set_read_pwd" hidden="hidden">
        <form class="layui-form set_read_pwd" style="margin-top: 20px;">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">设置密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password1" required lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">重复密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password2" required lay-verify="required" placeholder="请输入密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>
    <!--修改阅读密码-->
    <div id="change_read_pwd" hidden="hidden">
        <form class="layui-form change_read_pwd" style="margin-top: 20px;">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">原密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入原密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password1" required lay-verify="required" placeholder="请输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">重复新密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password2" required lay-verify="required" placeholder="请输入新密码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
    </div>
</div>
<!--分享的弹出层-->
<div class="edit_share" id="edit_share" hidden="hidden">
    <div class="link"><input type="text" class="link2" id="link" value=""></div>
    <textarea id="hidden"></textarea>
    <div class="copylink" onclick="copyText();">复制链接</div>
    <div id="btn">
        生成二维码
    </div>
    <div class="icon" id="QRCode"></div>
</div>
<script src="js/layui/layui.js"></script>
<script src="js/getUrlParam.js"></script>
<script>
    var noteList;
    //JavaScript代码区域
    var myUrl=localStorage.getItem("myUrl");
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var $ = layui.$;
        var layer = layui.layer;
        var label = $("#label");

        var token = sessionStorage.getItem("accessToken");


        //li删除
        $('body').on('click', '.deleteLi', function () {
            var liId = $(this).parent().children(":first").text();

            $.ajax({
                data: {
                    id: liId,
                    token: token,
                },
                url: 'http://338de254.cpolar.io/note-notes/notes/deleteNote',
                success: function (d) {
                    if (d.rs) {
                        parent.layer.msg('删除成功', {icon: 1});
                        window.location.reload();
                    }
                }
            })
        })

        /*重命名*/
        $('body').on('click', '.renameLi', function () {
            var liId = $(this).parent().children(":first").text();
            var notesName = $(this).parent().children(":first").next().text();
            layer.open({
                type: 2,
                title: '重命名',
                shadeClose: true,
                shade: false,
                maxmin: true,
                area: ['300px', '100px'],
                content: '/renamePage?id=' + liId + '&notesName=' + notesName,
            });
        })

        /*跳转页面*/
        $("#leftbox li a").click(function() {
            var attr = $(this).attr("data-url");
            $('.body_left').empty();
            $('.body_left').load(attr);
        })


        /*获得初始信息*/
        $.ajax({
            type: 'post',
            data: {
                id: token,
                token: token,
            },
            url: ' http://338de254.cpolar.io/note-user/user/getUser',
            success: function (data) {
                $('#personal_img').attr("src", data.img);
                $('#hidden_model input[name=id]').each(function () {
                    $(this).val(data.id);
                })
            }
        })

        /*右键点击*/
        document.oncontextmenu = function () {
            return false
        };     //禁止鼠标右键菜单显示


        for (var i = 0; i < 10; i++) {
            upm('welcome' + i, 'rightClick' + i, i);
        }


        function upm(id1, id2, i) {
            var id3 = '#' + id1;
            $('body').on('mouseup', id3, function (e) {
                if (e.button === 2) {       //如果button=1（鼠标左键），button=2（鼠标右键），button=0（鼠标中间键）
                    document.getElementById(id2).style.top = e.pageY - $(id3).offset().top + 'px';     //鼠标点击时给div定位Y轴
                    document.getElementById(id2).style.left = e.pageX - $(id3).offset().left + 'px';    //鼠标点击时给div定位X轴
                    document.getElementById(id2).style.display = "block";//显示        //显示div盒子
                } else {
                    document.getElementById(id2).style.display = "none";         //否则不显示div盒子
                }
            });

        }

        /*点击事件*/
        $('body').on('click', '.welcome', function () {
            var nid = $(this).find('.noteid')[0];
            if ($(this).find('.noteType').text() == '0') {
                sessionStorage.setItem('nId', $(nid).text());
                $('.body_right').load('markdownPage');
            } else if ($(this).find('.noteType').text() == '1') {
                sessionStorage.setItem('nId', $(nid).text());
                $('.body_right').load('ueditorPage');
            }
        });

        /*笔记列表*/
        noteList = new Vue({
            el: '#notes', //绑定
            data() {  //数据
                return {
                    info: []
                }
            },
            methods: {
                forId: function (index) {
                    return "welcome" + index
                },
                forDivId: function (index) {
                    return "rightClick" + index
                }
            }
        });

        $('#sort').click(function () {
            $(this).next().toggle();
        })

        $('.new').click(function () {
            $(this).next().toggle();
        })

        /*$(document).click(function (e) {
            if (e.target.closest('#sort') == null) $('.xf').hide();
            if (e.target.closest('.new') == null) $('.xf1').hide();
        })

        $(document).click(function (e) {
            if (e.target.closest('#sort') == null) $('.xf').hide();
            if (e.target.closest('.new') == null) $('.xf1').hide();
        })*/

        //个人信息
        $('#information').click(function () {
            layer.open({
                type: 2,
                title: '个人信息',
                shadeClose: true,
                shade: false,
                maxmin: true,
                area: ['520px', '580px'],
                content: '/informationPage',
            });
        })

        //修改密码
        $('#change_pwd').click(function () {
            layer.open({
                type: 1,
                title: '修改密码',
                shadeClose: true,
                shade: false,
                maxmin: true,
                area: ['400px', '280px'],
                content: $('#edit_pwd'),
                btn: ['确定修改', '取消修改'],
                yes: function (index, layero) {
                    $.ajax({
                        type: 'post',
                        data: $('.edit_pwd').serialize(),
                        url: 'http://343bdb1.cpolar.io/note-user/certificate/updatePwd',
                        success: function (res) {
                            if (res.rs) {
                                layer.msg(res.msg, {area: ['200px', '50px']});
                                layer.close(index);
                            } else {
                                $('.edit_pwd input[name=password]').val("");
                                $('.edit_pwd input[name=password1]').val("");
                                $('.edit_pwd input[name=password2]').val("");
                                layer.msg(res.msg, {area: ['300px', '50px']});
                            }
                        }
                    })
                }
            });
        })

        //修改阅读密码
        $('#read_pwd').click(function () {
            new Vue({
                el: '#set_read_pwd',
                data() {
                },
                mounted() {
                    axios
                        .get('http://343bdb1.cpolar.io/note-user/user/getReadPassword?id=' + token)
                        .then(function (response) {
                            if (response.data == null || response.data == "") {
                                layer.open({
                                    type: 1,
                                    title: '设置阅读密码',
                                    shadeClose: true,
                                    shade: false,
                                    maxmin: true,
                                    area: ['400px', '220px'],
                                    content: $('#set_read_pwd'),
                                    btn: ['确定设置', '取消设置'],
                                    yes: function (index, layero) {
                                        $.ajax({
                                            type: 'post',
                                            data: $('.set_read_pwd').serialize(),
                                            url: 'http://343bdb1.cpolar.io/note-user/user/setReadPwd',
                                            success: function (res) {
                                                if (res.rs) {
                                                    layer.msg(res.msg, {area: ['200px', '50px']});
                                                    layer.close(index);
                                                } else {
                                                    layer.msg(res.msg, {area: ['300px', '50px']});
                                                }
                                            }
                                        })
                                    }
                                });
                            } else {
                                layer.open({
                                    type: 1,
                                    title: '修改阅读密码',
                                    shadeClose: true,
                                    shade: false,
                                    maxmin: true,
                                    area: ['400px', '280px'],
                                    content: $('#change_read_pwd'),
                                    btn: ['确定修改', '取消修改'],
                                    yes: function (index, layero) {
                                        $.ajax({
                                            type: 'post',
                                            data: $('.change_read_pwd').serialize(),
                                            url: 'http://343bdb1.cpolar.io/note-user/user/updateReadPwd',
                                            success: function (res) {
                                                if (res.rs) {
                                                    layer.msg(res.msg, {area: ['200px', '50px']});
                                                    layer.close(index);
                                                } else {
                                                    $('.change_read_pwd input[name=password]').val("");
                                                    $('.change_read_pwd input[name=password1]').val("");
                                                    $('.change_read_pwd input[name=password2]').val("");
                                                    layer.msg(res.msg, {area: ['300px', '50px']});
                                                }
                                            }
                                        })
                                    }
                                });
                            }
                        })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            })
        })

        //分享
        $('body').on('click', '.share', function () {
            var token = sessionStorage.getItem("accessToken")

            var nodeId = $(this).parent().parent().siblings("#nodeId").html();
            var userId = $(this).parent().parent().siblings("#userId").html();
            var shareLink = "http://5a81bc55.cpolar.io/share/copysharePage?id=" + nodeId;
            console.log(nodeId);
            console.log(userId);
            console.log(shareLink);

            $("#link").val(shareLink);

            layer.open({
                type: 1,
                title: '分享',
                shadeClose: true,
                shade: false,
                maxmin: true,
                area: ['400px', '448px'],
                content: $('#edit_share')
            });
            $.ajax({
                data: {
                    "nodeId": nodeId,
                    "userId": userId,
                    "shareLink": shareLink
                },
                type: 'get',
                url: 'http://192.168.7.24:9095/share/createLink?token=' + token,
                success: function (data) {
                    if (data.rs) {
                        console.log(data);
                    }
                }
            })
        });

        /*...........................................................................................................*/
        //我的标签
        //标签列表
        $(function () {
            var data = {
                token: token
            }
            $.ajax({
                url: "http://338de254.cpolar.io/note_label/label/labelList",
                dataType: "json",
                async: false,
                type: 'post',
                data: data,
                success: function (data) {
                    console.log(data);
                    $.each(data, function (n, value) {
                        label.append('<dd><a style="padding-left: 68px;" href="javascript:;" class="gg">' + value.labelName + '</a></dd>');
                    })
                    //阻止电脑右键
                    label.children().bind("contextmenu", function () {
                        return false;
                    })
                    var d;
                    var f;
                    //标签列表右键
                    label.children().mousedown(function (e) {
                        //右键为3
                        if (3 == e.which) {
                            console.log("右键");
                            d = $(this).text();
                            f = $(this).addClass("addId")
                            var winWidth = $(document).width();
                            var winHeight = $(document).height();
                            var mouseX = e.pageX;
                            var mouseY = e.pageY;
                            var menuWidth = $(".contextmenu2").width();
                            var menuHeight = $(".contextmenu2").height();
                            var minEdgeMargin = 10;
                            menuLeft = mouseX + minEdgeMargin + "px";
                            menuTop = mouseY + minEdgeMargin - 345 + "px";
                            $(".contextmenu2").css({
                                "left": menuLeft,
                                "top": menuTop
                            }).show();

                            /*删除标签*/
                            layui.use('layer', function () {
                                var $ = layui.jquery,
                                    layer = layui.layer;
                                //触发事件
                                var active = {
                                    setTop: function () {
                                        var that = this;
                                        //多窗口模式，层叠置顶
                                    },
                                    del: function () {
                                        //示范一个公告层
                                        layer.open({
                                            type: 1,
                                            title: false,
                                            closeBtn: false,
                                            area: '300px;',
                                            shade: 0.8,
                                            id: 'LAY_layuipro',
                                            btn: ['确定', '取消'],
                                            yes: function () {
                                                //删除标签的ajax
                                                $.ajax({
                                                    type: 'post',
                                                    dataType: 'json',
                                                    async: false, //同步或异步,
                                                    contentType: 'application/json',
                                                    url: 'http://338de254.cpolar.io/note_label/label/delLabel',
                                                    data: JSON.stringify({
                                                        'labelName': d,
                                                        'userId': token
                                                    }),
                                                    success: function (d) {
                                                    },
                                                })
                                                layer.closeAll(); //关闭弹框
                                                //从列表中删除
                                                $(".addId").remove();
                                            },
                                            btnAlign: 'c',
                                            moveType: 1,
                                            content: '<div style="padding-left: 85px; padding-top: 30px;padding-bottom:30px;line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">确认删除此标签吗？</div>',
                                            success: function (d) {
                                            }
                                        });
                                    }
                                };

                                $('#layerDemo .layui-btn').on('click', function () {
                                    var othis = $(this),
                                        method = othis.data('method');
                                    active[method] ? active[method].call(this, othis) : '';
                                });
                            });
                            /*重命名标签*/
                            layui.use('layer', function () {
                                var $ = layui.jquery,
                                    layer = layui.layer;
                                //触发事件
                                var active = {
                                    setTop: function () {
                                        var that = this;
                                        //多窗口模式，层叠置顶
                                    },
                                    updLabel: function () {
                                        //示范一个公告层
                                        layer.open({
                                            type: 1,
                                            title: false,
                                            closeBtn: false,
                                            area: '300px;',
                                            shade: 0.8,
                                            id: 'LAY_layuipro',
                                            btn: ['确定', '取消'],
                                            yes: function () {
                                                var updLabelName = $("#updLabelName").val();
                                                console.log("updLabelName" + updLabelName);
                                                var data = {
                                                    'labelName': updLabelName,
                                                    'id': d,
                                                    'userId': token
                                                }
                                                //修改标签的ajax
                                                $.ajax({
                                                    type: 'post',
                                                    dataType: 'json',
                                                    async: false, //同步或异步,
                                                    contentType: 'application/json',
                                                    url: 'http://338de254.cpolar.io/note_label/label/updateLabel',
                                                    data: JSON.stringify(data),
                                                    success: function (d) {
                                                    },
                                                })
                                                layer.closeAll(); //关闭弹框
                                                //从列表中重命名
                                                $(".addId").html("<dd><a style='padding-left: 68px;' href='javascript:;'>" + updLabelName + "</a></dd>");
                                                //删除class，通过父节点找到
                                                var aa = label.children();
                                                aa.removeClass("addId")
                                            },
                                            btnAlign: 'c',
                                            moveType: 1,
                                            content: '<div style="padding-left: 85px; padding-top: 30px;padding-bottom:30px;line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">修改标签名</br>' + '<input id="updLabelName" value="' + d + '"></div>',
                                            success: function (d) {
                                            }
                                        });
                                    }
                                };

                                $('#layerDemo .layui-btn').on('click', function () {
                                    var othis = $(this),
                                        method = othis.data('method');
                                    active[method] ? active[method].call(this, othis) : '';
                                });
                            });

                        } else if (1 == e.which) {
                            //左键为1
                            var attr = "label/labelPage";
                            $('#content').load(attr);
                            console.log("左键")
                            var labelName = $(this).text();
                            sessionStorage.setItem('labelName', labelName);//传值到label.html
                        }
                    })
                },
                error: function (data) {
                    //
                    // $.messager.alert('错误', data.msg);
                }
            });
        })

        /*添加标签   鼠标右键事件*/
        // 鼠标右键事件
        $("#labelList").contextmenu(function (e) {
            // 获取窗口尺寸
            var winWidth = $(document).width();
            var winHeight = $(document).height();
            // 鼠标点击位置坐标
            var mouseX = e.pageX;
            var mouseY = e.pageY;
            // ul标签的宽高
            var menuWidth = $(".contextmenu").width();
            var menuHeight = $(".contextmenu").height();
            // 最小边缘margin(具体窗口边缘最小的距离)
            var minEdgeMargin = 10;
            menuLeft = mouseX + minEdgeMargin + "px";
            menuTop = mouseY + minEdgeMargin - 300 + "px";
            // ul菜单出现
            $(".contextmenu").css({
                "left": menuLeft,
                "top": menuTop
            }).show();
            // 阻止浏览器默认的右键菜单事件
            return false;
        });
        // 点击之后，右键菜单隐藏
        $(document).click(function () {
            $(".contextmenu").hide();
        });

        /*添加标签  弹出框*/
        layui.use('layer', function () {
            var $ = layui.jquery,
                layer = layui.layer;
            //触发事件
            var active = {
                setTop: function () {
                    var that = this;
                    //多窗口模式，层叠置顶
                },
                notice: function () {
                    //示范一个公告层
                    layer.open({
                        type: 1,
                        title: false //不显示标题栏
                        ,
                        closeBtn: false,
                        area: '300px;',
                        shade: 0.8,
                        id: 'LAY_layuipro' //设定一个id，防止重复弹出
                        ,
                        btn: ['确定', '取消'],
                        yes: function () {
                            var aa = $("#addLabel").val();
                            console.log(aa)
                            var data = {
                                'labelName': $("#addLabel").val(),
                                'userId': token
                            };
                            //添加标签的ajax
                            $.ajax({
                                type: 'post',
                                dataType: 'json',
                                async: false, //同步或异步,
                                contentType: 'application/json',
                                url: 'http://338de254.cpolar.io/note_label/label/addLabel',
                                data: JSON.stringify(data),
                                success: function (d) {
                                },
                            })
                            layer.closeAll(); //关闭弹框
                            label.append("<dd><a style='padding-left: 68px;' href='javascript:;'>" + $("#addLabel").val() + "</a></dd>");
                        },
                        btnAlign: 'c',
                        moveType: 1,
                        content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">新建标签<br><input type="text" id="addLabel" style="width:190px"/></div>',
                        success: function (d) {
                        }
                    });
                }
            };

            $('#layerDemo .layui-btn').on('click', function () {
                var othis = $(this),
                    method = othis.data('method');
                active[method] ? active[method].call(this, othis) : '';
            });
        });
        /*...........................................................................................................*/

    });

    /*function myRight(target) {
        noteList.clickEvent(target);
    }*/

    //分享的复制链接
    function copyText() {
        var text = document.getElementById("link").value;
        var input = document.getElementById("hidden");
        input.value = text; // 修改文本框的内容
        input.select(); // 选中文本
        document.execCommand("copy"); // 执行浏览器复制命令
        alert("复制成功");
    }

    //分享的生成二维码
    var bton = document.getElementById("btn");
    var bigBox = document.getElementById("QRCode");
    bton.onmouseover = function () {
        bigBox.style.display = "block";
        makeCode();
    }

    bton.onmouseout = function () {
        bigBox.style.display = "none";
    }

    var qrcode = new QRCode(document.getElementById("QRCode"), {
        width: 100,
        height: 100
    });

    function makeCode() {
        var elText = document.getElementById("link");

        if (!elText.value) {
            alert("Input a text");
            elText.focus();
            return;
        }

        qrcode.makeCode(elText.value);
    }

    $("#create_note").click(function () {
        var title;
        //获取当前日期
        var date1 = new Date();
        var d = date1.getDate();
        var m = date1.getMonth();
        var y = date1.getFullYear();
        var date = y + "-" + m + "-" + d;
        //获取所有笔记的标题
        var a = $("#note_list").find("li").find("span[class=Ntitle]");
        for (var i = 0; ; i++) {
            title = "无标题笔记" + (i == 0 ? "" : "(" + i + ")");
            var b = true;
            console.log(i + "---" + title + "----标题");
            for (var j = 0; j < a.length; j++) {
                console.log(a[j].innerText + "---" + title + "---判断" + a.length);
                if (a[j].innerText == title) {
                    b = false;
                    break;
                }
                b = true;
            }
            console.log(i + "===" + b + "===结果")
            if (b) {
                break;
            }
        }
        var token = sessionStorage.getItem("accessToken");
        $.ajax({
            url: "http://338de254.cpolar.io/note-notes/notes/saveNotes",
            data: {
                notesName: title,
                size: "random KB",
                counts: "random byte",
                type: "1",
                userId: token,
                classificationId: "",
                content: ""
            },
            type: 'post',
            dataType: "json",
            contextType: "application/json",
            async: true,
            success: function () {
                console.log("s")
            }
        });
        //右侧文本编辑
        $("#body_right").load("ueditorPage");
    });

    $("#create-mdnote").click(function () {
        var title;
        //获取当前日期
        var date1 = new Date();
        var d = date1.getDate();
        var m = date1.getMonth();
        var y = date1.getFullYear();
        var date = y + "-" + m + "-" + d;
        //获取所有笔记的标题
        var a = $("#note_list").find("li").find("span[class=Ntitle]");
        for (var i = 0; ; i++) {
            title = "无标题笔记" + (i == 0 ? "" : "(" + i + ")");
            var b = true;
            console.log(i + "---" + title + "----标题");
            for (var j = 0; j < a.length; j++) {
                console.log(a[j].innerText + "---" + title + "---判断" + a.length);
                if (a[j].innerText == title) {
                    b = false;
                    break;
                }
                b = true;
            }
            console.log(i + "===" + b + "===结果")
            if (b) {
                break;
            }
        }
        var token = sessionStorage.getItem("accessToken");
        $.ajax({
            url: "http://338de254.cpolar.io/note-notes/notes/saveNotes",
            data: {
                notesName: title,
                size: "random KB",
                counts: "random byte",
                type: "0",
                userId: token,
                classificationId: "",
                content: ""
            },
            type: 'post',
            dataType: "json",
            contextType: "application/json",
            async: true,
            success: function () {
                console.log("s")
            }
        });
        //右侧文本编辑
        $("#body_right").load("ueditorPage");
    });

    /*...........................................................................................................*/

    //加星
    function mouse(d) {
        if (d==1){
            this.src="img/star1.png"
        }else {
            this.src="img/star2.png"
        }
    }

    var toggle = true;

    function change(d) {
        console.log("asd")
        var id = $(d).parent().attr("value");
        if (toggle) {
            $('.star').attr('src', 'img/star2.png');
            $('.star').removeAttr("onMouseOut");
            $('.star').unbind();
            toggle = false;

            $.ajax({
                type: 'get',
                async: false, //同步或异步,
                contentType: 'application/json',
                url: 'http://localhost:9097/notes/setfavorite?id='+id,
                success: function(d) {},

            })
        } else {
            $('.star').mouseout(function () {
                $('.star').attr('src', 'img/star1.png');
            })
            toggle = true;
            $.ajax({
                type: 'get',
                async: false, //同步或异步,
                contentType: 'application/json',
                url: 'http://localhost:9097/notes/nofavorite?id='+id,
                success: function(d) {},
            })

        }
    }


</script>


</body>

</html>